<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <link href="__ROOT__/public/static/index/css/countdown.css"  rel="stylesheet" type="text/css">
    <script src="__ROOT__/public/static/index/js/underscore-1.5.2-min.js" type="text/javascript"></script>
    <script src="__ROOT__/public/static/index/js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="__ROOT__/public/static/index/js/jquery.qrcode.min.js" type="text/javascript"></script>

	<title>计分板</title>
	<style type="text/css">
	    *{padding: 0px;margin:0px;}
	    html,body{width: 1280px;height: 720px;background-image: url("__ROOT__/public/static/index/image/bj.png");background-size: 100% 100%;font-family:'微软雅黑'}
    
        #player2-name,#player1-name{
            font-family:"庞门正道标题体";
        }
        #frame{
            font-family:"汉真广标";
        }

        .box{width: 82%;height:100%;margin: 0 auto;}
        .player{width: 100%;height:25%;}
        .score{width: 100%;height: 58%;}
        .player_one{width: 35%;height: 94%;float:left;font-size: 80px;font-family: "庞门正道标题体";color: #fff;text-align: center;padding-top: 6%}
        .player_two{width: 35%;height: 94%;float: right;font-size: 80px;font-family: "庞门正道标题体";color: #fff;text-align: center;padding-top: 6%}
        .player_one p{line-height: 80px;}
        .player_two p{line-height: 80px;}
        .player-one-score{height: 100%;width: 35%;float: left;}
        .frame-info{height: 100%;width: 30%;float: left;}
        .player-two-score{height: 100%;width: 35%;float: left;}
        .footer{position:absolute; bottom:0;width: 90%;height: 12%;color: #fff;text-align: center;}
        #logout-code{position:fixed;z-index:2;bottom:5px;left:88%;width:90px; height:90px;}
	</style>
</head>
<body>
	<div class="box">
        <div class="player">

            <div class="player_one">
                {if condition="is_array($battle_info['player1_name'])"}
                <p>{$battle_info['player1_name'][0]}</p>
                <p>{$battle_info['player1_name'][1]}</p>
                {else /}
                 <p style="margin-top:40px">{$battle_info['player1_name']}</p>
                {/if}
            </div>


            <div class="player_two">
                {if condition="is_array($battle_info['player2_name'])"}
                <p>{$battle_info['player2_name'][0]}</p>
                <p>{$battle_info['player2_name'][1]}</p>
                {else /}
                 <p style="margin-top:40px">{$battle_info['player2_name']}</p>
                {/if}
            </div>
            <div style="clear:both"></div>
        </div>
       
        <div class="score">
            <div class="player-one-score">
                <div style="width:80%;height:82%;margin:0px auto;background: url(__ROOT__/public/static/index/image/score_bg.png);background-size: 100% 100%;">
                    <div style="width:100%;height:44%">
                        <p id="player1_score" style="text-align:center;color:#ffda72;font-size:100px;font-family:'微软雅黑';paddind-top:5px"><span>{$snooker_score[1]}</span>
                        </p>
                    </div>
                    <div style="width:100%;height:28%">
                        <p  id="player1_break"  style="text-align:center;color:#ffda72;font-size:60px;font-family:'微软雅黑'">{$snooker_score[2]}</p>
                    </div>
                    <div style="width:100%;height:28%">
                        <p id="player1_point"  style="text-align:center;color:#fff;font-size:60px;font-family:'微软雅黑'">{$snooker_score[3]}</p>
                    </div>
                </div>
            </div>

       
             <div class="frame-info">
                   <div style="width:80%;height:80%;margin:0px auto;margin-top:5%">
                       <div style="width:100%;height:38%;padding-top:6%">
                            <p style="text-align:center;color:#ffda72;font-size:48px;font-family:'汉真广标';">总局数</p>
                            <p style="text-align:center;color:#ffda72;font-size:48px;font-family:'汉真广标';">{$battle_info['sum_frame']}</p>
                        </div>
                        <div style="width:100%;height:28%">
                            <p style="text-align:center;color:#ffda72;font-size:60px;font-family:'汉真广标'">BREAK</p>
                        </div>
                        <div style="width:100%;height:28%">
                            <p style="text-align:center;color:#fff;font-size:60px;font-family:'汉真广标'">POINTS</p>
                        </div>
                   </div>
             </div>
             <div class="player-two-score">
                  <div style="width:80%;height:82%;margin:0px auto;background: url(__ROOT__/public/static/index/image/score_bg.png);background-size: 100% 100%;">
                        <div style="width:100%;height:44%">
                          <p id="player2_score" style="text-align:center;color:#ffda72;font-size:100px;font-family:'微软雅黑';paddind-top:5px">{$snooker_score[4]}</p>
                        </div>
                        <div style="width:100%;height:28%">
                          <p id="player2_break" style="text-align:center;color:#ffda72;font-size:60px;font-family:'微软雅黑'">{$snooker_score[5]}</p>
                        </div>
                        <div style="width:100%;height:28%">
                          <p id="player2_point" style="text-align:center;color:#fff;font-size:60px;font-family:'微软雅黑'">{$snooker_score[6]}</p>
                        </div>
                  </div>
             </div>
            
        </div>
        <div style="clear:both"></div>
        <div class="footer">
            <p class="event-info" style="font-family:'微软雅黑';font-size:37px;padding-top:20px;">
            {$battle_info['event_name']} <span id="event-stage" style="font-family:'微软雅黑';font-size:37px">{$battle_info['event_stage']}</span></p>
        </div>
    <div>
    <div id="logout-code"><div>

    <input id="update-time" type="hidden" value="{$battle_info['update_time']}">

</body>

<script type="text/javascript">
    $('html').css({
            cursor: 'none'
    });
    $("#logout-code").qrcode({ 
        width: 90, //宽度 
        height:90, //高度 
        text: "{$Think.get.battle_id}" //任意内容 
    }); 
    //更新记分板
    function updateScoreBoard(){
        var update_time   = $("#update-time").val();

    	var url = "{:Url('Index/updateScoreBoard',['battle_id'=>$battle_id])}"+"?update_time="+update_time+"&";

        $.ajax({  
            url: url,  
            dataType: "json",  
            async:true, 
            cache: false,  
            // error: function (XMLHttpRequest, textStatus, errorThrown) {  
            //     $("#state").append("[state: " + textStatus + ", error: " + errorThrown + " ]<br/>");  
            //     if (textStatus == "timeout") { // 请求超时  
            //         longPolling(); // 递归调用  
            //     } else { // 其他错误，如网络错误等  
            //         longPolling();  
            //     }  
            // },  
            success: function (data) {
                if(data.state == 2){
                    var url = "{:Url('Index/index')}"+"?battle_id="+data.battle_id;
                    window.location.href = url;
                }else if(data.state == 3){
                    var url = "{:Url('Index/login')}";
                    window.location.href = url;
                }else if(data.state == 1){
                    $("#player1_score").text(data.snooker_score[1]);
                    $("#player1_break").text(data.snooker_score[2]);
                    $("#player1_point").text(data.snooker_score[3]);
                    $("#player2_score").text(data.snooker_score[4]);
                    $("#player2_break").text(data.snooker_score[5]);
                    $("#player2_point").text(data.snooker_score[6]);

                     //开始判断是双打还是单打
                    var player1_name = data.battle_info['player1_name'].indexOf(',') > 0 ? data.battle_info['player1_name'].split(',') : (data.battle_info['player1_name'].indexOf('，') > 0 ? data.battle_info['player1_name'].split('，') : data.battle_info['player1_name'] );
                    var player2_name = data.battle_info['player2_name'].indexOf(',') > 0 ? data.battle_info['player2_name'].split(',') : (data.battle_info['player2_name'].indexOf('，') > 0 ? data.battle_info['player2_name'].split('，') : data.battle_info['player2_name'] );

                    if(player1_name instanceof Array){
                        $(".player_one").html('<p>'+player1_name[0]+'</p><p>'+player1_name[1]+'</p>');
                    }else{
                        $(".player_one").html('<p style="margin-top:40px">'+player1_name+'</p>');
                    }

                    if(player2_name instanceof Array){
                        $(".player_two").html('<p>'+player2_name[0]+'</p><p>'+player2_name[1]+'</p>');
                    }else{
                        $(".player_two").html('<p style="margin-top:40px">'+player2_name+'</p>');
                    }


                    $('#sum-frame').text(data.battle_info['sum_frame']);
                    $("#event-stage").text(data.battle_info['event_stage']);
                    $("#update-time").val(data.battle_info['update_time']);
                    updateScoreBoard();
                }else{
                	updateScoreBoard();
                }
                
            }  
        });  
    }
   
    window.onload=function(){ 
        updateScoreBoard();
    }
</script>
</html>